/**
 * Created by 57376 on 2017/11/17.
 * 
 * 习题页面的js
 */

//点击返回 ，返回上一页
$('.back').on('click',function (){
    window.history.go(-1);
})
//  点击开始答题，删除开始答题logo页面
$('.begining').on('click',function(){
	$('.logo').remove();
	var  date=  new Date();//获取开始做题的时间
	var result=[];// 定义一个空数组，用来存储题目的信息数据
	//	发送ajax 加载练习题
		$.ajax({
		 type: "get",
         url: root+"json/test/test?id=449",
         data: {},
         dataType: "text",
         success:function(data1){
        	 var data=eval('('+data1+')');
//        	 创建一个模板，遍历data数组，直接添加到body中
        	 var  html='';
        	 
//        	 创建外层循环，获取一共有多少道题目
        	 for (var i = 0; i < data.length; i++) {
        		 var res={};
        		 html += '<div class="test_' + i + '  active">';
        		 html += '<p>' + data[i].title + '</p>';
        		//内层循环获取每道题的有几个选项
        		 var list=eval('('+data[i].list+')');
	             for (var j = 0; j < list.length; j++) {
	                 html += ' <div class="check" id="' + i + 'test_' + list[j].value + '">';
	                 html += '<input class="' + i + 'test_' + list[j].value + '"  type="' + data[i].type + '" name="' + data[i].name + '" value="' + list[j].value + '"/>';
	                 html += '<lable for="test_' + list[j].value + '">' + list[j].lable + '</lable>';
	                 html += ' </div>';
	             }       	
        		 html += '<footer>';
	             html += '  <a href="#" class="prev" id="'+i+'"><i class=" iconfont icon-zuoyoujian1"></i><span>上一题</span></a>';
	             html += '  <a href="#" class="btn"><i class=" iconfont icon-answer-card"></i><span>答题卡</span></a> ';
	             html += '  <a href="#" class="next" id="'+i+'"><i class=" iconfont icon-zuoyoujian"></i><span>上一题</span></a>';
	             html += '</footer>';
	             html += '</div>';
	             
	           //把数据库中的数据取出来，存储到自己定义的数组中
	             res["name"]=data[i].name;
	             res["list"]=data[i].list;
	             res["title"]=data[i].title;
	             res["type"]=data[i].type;
	             res["val"]=data[i].val;

	             result.push(res);
        	 }
        	 //存放题号的页面        	 
        	 html +='<div class="num active hide">';
             for (var i = 0; i < data.length; i++) {
               html += '<a data-numid="' + data[i].name + '" href="#" >' + data[i].name + '</a>';
             }
             html +='<input id="ending" type="button" value="交卷并查看结果"/>';
             html +='</div>';
             //点击交卷如果还有没做完的题目的弹出层
	         html +='<div class="mod hide">';
	         html +='<div>';
	         html +='<p>还有<span></span>道题没做，请全部完成在交卷</p>';
	         html +='<footer><a href="#" class="sure">关闭</a></footer>';
	         html +='</div>';
	         html +='</div>';
	         
        	 //把动态生成的html模板添加到页面中
        	 document.querySelector('.box').innerHTML = html;
        	 //给所有带active的div添加隐藏属性，并让第一道题所在的div显示
        	 $('.active').addClass("hide");
             $('.test_0').removeClass('hide');
             //模板添加成功之后初始化iCkeck插件
             $('input').iCheck({
            	 checkboxClass: 'icheckbox_square-green',
            	 radioClass: 'iradio_square-green',
            	 increaseArea: '20%' // optional
             });
             //点击input 按钮自动跳转到下一题
             $('input').on('ifChecked', function(){
            	 //获取input的类名
            	 var icheckClass= $(this).context.className;
            	 setTimeout(function(){
            		 var id = icheckClass.split('t')[0];
                	 //不让id超过题目总数
                	 if(id<data.length-1){
                		 id=++id;
                         $('.active').addClass('hide');
                         $('.test_'+id+'').removeClass('hide');
                	 }
            	 },100)
             });
             //点击input所在的div也会让input显示选中状态     并自动跳转到下一题
             $('.check').on('click', function () {
            	 //div 的id 和input的 class相同 用来关联用
            	 var idClass= $(this).context.id;
            	 //将输入框的状态设置为checked
            	 $('.'+idClass+'').iCheck('check'); 
            	 setTimeout(function(){
            		 var id = idClass.split('t')[0];
                	 //不让id超过题目总数
                	 if(id<data.length-1){
                		 id=++id;
                         $('.active').addClass('hide');
                         $('.test_'+id+'').removeClass('hide');
                	 }else if(id >= data.length-1 ){
                		 $('.active').addClass('hide');
                		 $('.num').removeClass('hide');
                	 }
            	 },100)
            	 
             })
             //判断哪些题答完，想对应的习题标号背景变蓝   
             $('input').on('ifChecked', function () {
                 if ($(this).val() == null) {
                     console.log(111)
                 } else {
                     var num = $(this).context.name;//获取当前点击的input的name值
                     var id = num;//name值隐式转换
                     //每一题相对应的a标签改变样式
                     $("a[data-numid = " + id + "]").addClass('bgc'); 
                 }
             });
             //点击下一题
             $('.next').on('click', function () {
               var id=$(this).context.id;
               id=++id;
               if(id>=data.length){
            	   $('.active').addClass('hide');
                   $('.num').removeClass('hide');
               }else{
                   $('.active').addClass('hide');
                   $('.test_'+id+'').removeClass('hide');
               }
             })
             //点击上一题
             $('.prev').on('click', function () {
                var id=$(this).context.id;
                id=--id;
                if(id<0){
                   alert('这是第一题了')
                }else{
                   $('.active').addClass('hide');
                   $('.test_'+id+'').removeClass('hide');
                }
             })
             //点击 题号，直接跳转到当前哪一题
             $('.num a').on('click', function () {
                 var numid=$(this).context.innerHTML-1;
                 $('.test_'+numid+'').removeClass('hide');
                 $('.num').addClass('hide');
             })
             //点击答题卡。。。。。。。。。。。
             $(".btn").on("click",function(){  
	            	 //让题目num所在的页面显示
	            	 $('.active').addClass('hide');
	                 $('.num').removeClass('hide');
	                 //点击交卷并查看结果
	                 $('#ending').on("click", function () {
	                    //获取全部题目一共有几道     获取已作答完毕的题目   
	                	 var  a_arr=[];
	                	 $('a[class="bgc"]').each(function () {
	                         a_arr.push('bgc');
	                     })
	                     var sum = data.length;//题目总数
	                     var done = a_arr.length;//已经完成题目的数量
	                     //获取用户答案
	                     var r=$('input[type="radio"]:checked')
	                     for(var i = 0; i < r.length; i++){
	                         result[i].uval= r[i].value;
	                     }
	                     
	                     if(sum==done){
	                    	 var  dateEnd= new Date();
	                    	 
	                    	 var turnForm = document.createElement("form");
	                         document.body.appendChild(turnForm);
	                         turnForm.method = 'post';
	                         turnForm.action = root+'test/result';
	                         var newElement = document.createElement("input");
	                         newElement.setAttribute("name","result");
	                         newElement.setAttribute("type","hidden");
	                         newElement.setAttribute("value",JSON.stringify(result));
	                         turnForm.appendChild(newElement);
	                         var newElement1 = document.createElement("input");
	                         newElement1.setAttribute("name","start_time");
	                         newElement1.setAttribute("type","hidden");
	                         newElement1.setAttribute("value",date.format("yyyy-MM-dd hh:mm:ss"));
	                         turnForm.appendChild(newElement1);
	                         var newElement2 = document.createElement("input");
	                         newElement2.setAttribute("name","end_time");
	                         newElement2.setAttribute("type","hidden");
	                         newElement2.setAttribute("value",dateEnd.format("yyyy-MM-dd hh:mm:ss"));
	                         turnForm.appendChild(newElement2);
	                         var newElement3 = document.createElement("input");
	                         newElement3.setAttribute("name","course_id");
	                         newElement3.setAttribute("type","hidden");
	                         newElement3.setAttribute("value",pid);
	                         turnForm.appendChild(newElement3);
	                         turnForm.submit();
	                         //数据发送给后台后跳转到完成页面course_id
	                     }else{
	                       //弹出 交卷弹出层
	                       $('.mod span').html(sum-done); 
	                       $('.mod').removeClass('hide');
	                      
	                     }
	                 })
	                 //点击关闭mod层
	                 $('.mod').on('click',function(){
	                      $('.mod').addClass('hide');
	                 })
              })          
             
         }
	})
	
/**
 * 对Date的扩展，将 Date 转化为指定格式的String
 * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符
 * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
 * eg:
 * (new Date()).format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
 * (new Date()).format("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04
 * (new Date()).format("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04
 * (new Date()).format("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04
 * (new Date()).format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
 */
    Date.prototype.format=function(fmt) {
    var o = {
        "M+" : this.getMonth()+1, //月份
        "d+" : this.getDate(), //日
        "h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时
        "H+" : this.getHours(), //小时
        "m+" : this.getMinutes(), //分
        "s+" : this.getSeconds(), //秒
        "q+" : Math.floor((this.getMonth()+3)/3), //季度
        "S" : this.getMilliseconds() //毫秒
    };
    var week = {
        "0" : "/u65e5",
        "1" : "/u4e00",
        "2" : "/u4e8c",
        "3" : "/u4e09",
        "4" : "/u56db",
        "5" : "/u4e94",
        "6" : "/u516d"
    };
    if(/(y+)/.test(fmt)){
        fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
    }
    if(/(E+)/.test(fmt)){
        fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[this.getDay()+""]);
    }
    for(var k in o){
        if(new RegExp("("+ k +")").test(fmt)){
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
        }
    }
    return fmt;
}
	
	
})







